<template>
  <view class="article-detail-card">
    <view class="article-detail-title">{{ info.articleName }}</view>
    <view class="article-detail-desc">
      <rich-text :nodes="processedArticleContent"></rich-text>
    </view>
    <view class="footer-bar">
      <button
        class="footer-btn share"
        open-type="share"
        @click="onShare"
      >
        <van-icon
          name="share-o"
          size="36rpx"
          style="margin-right: 12rpx"
        />
        分享
      </button>
    </view>
  </view>
</template>

<script>
  import ShareUtils from '../../../common/share.js'
  import RichTextUtils from '../../../common/richTextUtils.js' // 引入工具类

  export default {
    name: 'ArticleDetailCard',
    props: {
      info: {
        type: Object,
        required: true
      }
    },
    computed: {
      processedArticleContent() {
        return RichTextUtils.limitImageWidth(this.info.articleContent)
      }
    },
    onShareAppMessage() {
      return ShareUtils.shareToFriend({
        title: this.info.articleName,
        path: ShareUtils.generateSharePath('/pagesA/article/detail', {
          id: this.info.id,
          menuType: this.info.menuType,
          openId: this.info.openId
        }),
        imageUrl: this.info.coverImgUrl
      })
    },
    methods: {
      onShare() {
        this.$emit('share')
      }
    }
  }
</script>

<style scoped lang="scss">
  .article-detail-card {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
  }
  .article-detail-title {
    margin: 40rpx 0 0 0;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
  }
  .article-detail-desc {
    width: calc(100vw - 64rpx);
    margin: 32rpx 0 100rpx 0;
    font-size: 28rpx;
    color: #666;
    overflow-x: hidden;
  }
  .footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 24rpx 32rpx 32rpx 32rpx;
    box-shadow: 0rpx 7rpx 46rpx 0rpx rgba(0, 0, 0, 0.33);
    z-index: 10;
  }
  .footer-btn.share {
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
    background: #0c8d6a;
    border-radius: 60rpx;
    border: none;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
